import React, { Component, Fragment } from 'react';
import { List, Avatar,Row, Col,Button } from 'antd';
import classNames from 'classnames';

import styles from "./CommonOrder.less";
const data = [
    {
      title: {num:1,price:89},
      description:"玄关走廊装饰画纯手绘国画客厅沙发背景墙新中式挂画花鸟斗方"

    },
    {
      title: {num:1,price:89},
      description:"玄关走廊装饰画纯手绘国画客厅沙发背景墙新中式挂画花鸟斗方"

    },
    {
      title: {num:1,price:89},
      description:"玄关走廊装饰画纯手绘国画客厅沙发背景墙新中式挂画花鸟斗方"

    },
    {
      title: {num:1,price:89},
      description:"玄关走廊装饰画纯手绘国画客厅沙发背景墙新中式挂画花鸟斗方"

    },
  ];

  const LabelBoxFn = (title,content)=>{
    return(
      <div className="labelBox">
        <span>{title}</span>
        <b>{content}</b>
      </div>
    )
  }

  class CommonOrder extends Component{
    render(){
        return (
          <ul className={styles.CommonOrder}>
            <li>
              <Row className={styles.header}>
                <Col span={19} className={styles.flexstartwarp}>             
                 <b className={styles.Number}>54</b>
                 {LabelBoxFn("订单编号:","X1547363852654763")}
                {LabelBoxFn("下单时间:","2019-01-13 15:17:33")}
                </Col>
                <Col span={5} className={styles.flexbetweenwarp}>
                  <Button type="danger" size="small">退款</Button>
                  <Button type="primary" size="small">备注</Button>
                  <Button type="primary" size="small">打印</Button>
                </Col>
              </Row>
              <Row className={styles.content}>

                <Col span={14} className={styles.contentlist}>
                  <List
                  itemLayout="horizontal"
                  dataSource={data}
                  renderItem={item => (
                      <List.Item>
                        <List.Item.Meta
                          avatar={<Avatar shape="square" size={72} src="http://imgs.bukepay.com/upload/20181212/0f96b6dcbc284831832b29f45467eee4"  />}
                          title={
                              LabelBoxFn(`¥${item.title.price}`,`x${item.title.num}`)
                            }
                          description={item.description}
                        />
                      </List.Item>
                    )}
                  />
                </Col>
                <Col span={7} className={classNames(styles.flexbetweenwarp,styles.user)}>
                <List
                  itemLayout="horizontal" 
                  >
                      <List.Item>
                        <List.Item.Meta
                          avatar={<Avatar  icon="user"  />}
                          title={
                            LabelBoxFn(`吕天宇`,`152xxxxxddd`)
                          }
                          description="玄关走廊装饰画纯手绘国画客厅沙发背景墙新中式挂画花鸟斗方"
                        />
                      </List.Item>
                  </List>
                </Col>
                <Col span={3} className={styles.state}>
                    <b className={styles.warring}>交易关闭</b>
                    <span>买家付款超时，系统自动取消</span>

                </Col>
              </Row>
              <div className={styles.footer}>
                {LabelBoxFn("商品总价:","￥48.8")}
                {LabelBoxFn("运费:","￥0")}
                {LabelBoxFn("优惠:","￥0")}
                {LabelBoxFn("合计:","￥48.8")}
              </div>
            </li>
          </ul>

        )
    }
  }

  export default CommonOrder;

